<template>
    <div>
      <!-- 委外发料单表单 -->
      <el-form :model="form" label-width="90px" class="form-container">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="单据编码：" >
              <el-input v-model="form.documentCode" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="业务类型：">
              <el-select v-model="form.businessType" placeholder="请选择">
                <el-option label="委外发料" value="委外发料" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="仓库：">
              <el-select v-model="form.warehouse" placeholder="请选择">
                <el-option label="成品仓" value="成品仓" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="物料编码：">
              <el-input v-model="form.materialCode" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单据日期：">
              <el-date-picker v-model="form.documentDate" type="date" placeholder="选择日期" style="width: 100%;" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="操作员：">
              <el-input v-model="form.operator" disabled/>
            </el-form-item>
          </el-col>
        
          <el-col :span="6">
            <el-form-item label="物料名称：">
              <el-input v-model="form.materialName"disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单据状态：">
              <el-select v-model="form.documentStatus" placeholder="请选择" disabled>
                <el-option label="开立" value="开立" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="审核员：">
              <el-input v-model="form.auditor"  disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="委外单号：">
              <el-input v-model="form.outsourcingOrderNumber"  disabled/>
              <el-button type="text" @click="showOrderDialog=true">选择</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="计量单位：" >
              <el-input v-model="form.unitOfMeasurement"  disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="业务状态：">
              <el-select v-model="form.businessStatus" placeholder="请选择">
                <el-option label="正常" value="正常" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="审核日期：">
              <el-input v-model="form.auditDate" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="供应商：">
              <el-input v-model="form.supplier" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="委外数量：">
              <el-input v-model="form.outsourcingQuantity"disabled />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注信息：">
              <el-input v-model="form.remark" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
  
      <!-- 物料信息表格 -->
      <div style="margin-top: 20px;">
        <div style="font-weight: bold; margin-bottom: 10px;">物料信息</div>
        <el-table :data="tableData" border style="width: 100%;">
          <el-table-column prop="index" label="序号" width="60" />
          <el-table-column prop="mbom" label="MBOM单据" />
          <el-table-column prop="materialCode" label="物料编码" />
          <el-table-column prop="materialName" label="物料名称" />
          <el-table-column prop="model" label="型号规格" />
          <el-table-column prop="main" label="主计" />
          <el-table-column prop="qty" label="领用数量" />
          <el-table-column prop="outQty" label="出库数量" />
          <el-table-column prop="remark" label="备注" />
          <el-table-column label="操作" width="100">
            <template #default="scope">
              <el-button type="text" size="small">编辑</el-button>
              <el-button type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" style="margin-top: 10px;">导入</el-button>
      </div>
  
      <!-- 顶部按钮 -->
      <div style="position: absolute; top: 10px; right: 20px;">
        <el-button type="primary" @click="AddOutSourRelease()">保存</el-button>
        <el-button>取消</el-button>
        <el-button type="success">审核</el-button>
        <el-button type="warning">反审核</el-button>
        <el-button type="info">收起</el-button>
      </div>
    </div>
    <el-dialog v-model="showOrderDialog" title="选择委外订单" width="80%">
      <el-table :data="tableData1" border @selection-change="handleSelectionChange">
          <el-table-column prop="documentCode" label="单据编码" />
          <el-table-column prop="documentDate" label="单据日期">
            <template v-slot="scope">
                {{scope.row.documentDate.substring(0,10)}}
            </template>
          </el-table-column>
          <el-table-column prop="createdBy" label="创建人" />
          <el-table-column prop="documentStatus" label="单据状态" />
          <el-table-column prop="businessType" label="业务类型" />
          <el-table-column prop="businessStatus" label="业务状态" />
          <el-table-column prop="auditDate" label="审核日期" >
            <template v-slot="scope">
               <p v-if="scope.row.auditDate!='1900-01-01T00:00:00'">{{scope.row.auditDate.substring(0,10)}}</p>
               <p v-else> </p> 
            </template>
          </el-table-column>
          <el-table-column prop="auditor" label="审核人" />
          <el-table-column label="操作" width="100">
            <template #default="scope">
              <el-button type="primary" link style="margin-top: 10px;" @click="Handlrer(scope.row)">选择</el-button>
            </template>

          </el-table-column>
        
        </el-table>
        <el-button type="info" style="margin-top: 10px;" @click="showOrderDialog=false">关闭</el-button>
    </el-dialog>
  </template>
  
  <script setup>
  import { onMounted, ref ,reactive} from 'vue'
  import {KongaUrl} from '@/axios/axiosHelp';
  import { ElMessage } from 'element-plus';
  import { useCounterStore } from '@/stores/counter';
  import { useRoute,useRouter } from 'vue-router';
import axios from 'axios';
  let router=useRouter();
  let route=useRoute();
  const userStore = useCounterStore();
  const form = reactive({
    id:0,
    documentCode: `WWFL${Math.floor(Math.random() * (999999 - 100000 + 1)) + 100000}`,
    businessType: '',
    warehouse: '',
    materialCode: '',
    documentDate: '',
    operator: '',
    followOrderNumber: '',
    materialName: '',
    documentStatus: '',
    auditor: '',
    outsourcingOrderNumber: '',
    unitOfMeasurement: '',
    businessStatus: '',
    auditDate: '',
    supplier: '',
    outsourcingQuantity: '',
    remark: '', 
    LastModifiedBy:'',
    createdBy:userStore.user.userName,
  })
  
  const tableData = ref([])
  const showOrderDialog=ref(false)

  onMounted(()=>{
    getOutSourcingOrderList();
    fantian();
  })

const fantian=()=>{
    form.id=route.query.id;
    form.documentCode=route.query.documentCode;
    form.businessType=route.query.businessType;
    form.warehouse=route.query.warehouse;
    form.materialCode=route.query.materialCode;
    form.documentDate=route.query.documentDate;
    form.operator=route.query.operator;
    form.followOrderNumber=route.query.followOrderNumber;
    form.materialName=route.query.materialName;
    form.documentStatus=route.query.documentStatus;
    form.auditor=route.query.auditor;
    form.outsourcingOrderNumber=route.query.outsourcingOrderNumber;
    form.unitOfMeasurement=route.query.unitOfMeasurement;
    form.businessStatus=route.query.businessStatus;
    form.auditDate=route.query.auditDate;
    form.supplier=route.query.supplier;
    form.outsourcingQuantity=route.query.outsourcingQuantity;
    form.remark=route.query.remark;
    form.LastModifiedBy=new Date().toLocaleString();
    form.createdBy=route.query.createdBy;  
}


    // 原表格数据
    const tableData1 = ref([]);
    const page=reactive({
    pageindex:1,
    pagesize:15,
    DocumentCode:'',
    DocumentStatus:'',
    BusinessStatus:'',
    BeginData:'',
    EndData:'',
    totalpage:0,
    totalcount:0,
  })
  const selectedIds = ref([])
// 选择项变化
const handleSelectionChange = (val) => {
  selectedIds.value = val.map(item => item.id)
  console.log('选中的数据', selectedIds.value)
}
//查询单据方法
const getOutSourcingOrderList=()=>{
  KongaUrl({
        url:'/weiwaidu/api/OutSourc/QueryOutSourOrder',
        method:'get',
        params:{
            pageindex:page.pageindex,
            pagesize:page.pagesize,
            DocumentCode:page.DocumentCode,
            DocumentStatus:page.DocumentStatus,
            BusinessStatus:page.BusinessStatus,
            BeginData:page.BeginData,
            EndData:page.EndData,
        }
    })
    .then(res=>{
        if(res.data.code==101){
          tableData1.value=res.data.list;
            console.log(tableData.value)
            page.totalcount=res.data.totalcount
            page.totalpage=res.data.totalpage
        }
    })
}
const Handlrer=(row)=>{
  console.log(row)
  form.businessType=row.businessType;
  form.warehouse=row.warehouse;
  form.materialCode=row.materialCode;
  form.documentDate=row.documentDate;
  form.operator=row.operator;
  form.followOrderNumber=row.documentCode;
  form.materialName=row.materialName;
  form.documentStatus=row.documentStatus;
  form.auditor='';
  form.outsourcingOrderNumber=row.documentCode;
  form.unitOfMeasurement='个';
  form.businessStatus=row.businessStatus;
  form.auditDate=row.auditDate;
  form.supplier=row.supplier;
  form.outsourcingQuantity=row.outsourcingQuantity;
  form.remark=row.remark;
  showOrderDialog.value=false
}
const AddOutSourRelease=()=>{
  axios({
    url:'http://localhost:5028/api/Outsour/UpdateOutsourMateria',
    method:'post',
    data:form
  })
  .then(res=>{
    if(res.data.code==101){
      ElMessage.success('操作成功')
      router.push('/OutSourReleaseShow')
    }
  })
}

  </script>
  
  <style scoped>
  .form-container {
    background: #fff;
    padding: 20px 10px 10px 10px;
    border-radius: 6px;
  }
  </style>